<html>
<head>
<title>Audience Star Admin: Edit Talk</title>
		<script type='text/javascript' src='/static/js/jquery.min.js'></script>
		<script type='text/javascript' src='/static/js/jquery-tmpl.min.js'></script>
		<script type='text/javascript' src='/static/js/knockout-2.1.1.js'></script>
</head>
<body>
<h2>Editing: &quot;<span data-bind="text:title"></span>&quot; (<span data-bind="text:short_title"></span>)</h2>

Title: <input size="30" data-bind="value: title"/><br/>
Short Title: <input data-bind="value: short_title"/><br/>
Description: <input size="128" data-bind="value: description"/><p/>
URL to icon image: <input size="100" data-bind="value: icon_url"/><p/>
Category 1 Text: <input data-bind="value: category1"/><p/>
Category 2 Text: <input data-bind="value: category2"/><p/>
Category 3 Text: <input data-bind="value: category3"/><p/>
Topics (<span data-bind="text: topics().length"></span>):
<table>
    <thead><tr>
        <th>Title</th><th>Description</th><th></th>
    </tr></thead>
    <!-- Todo: Generate table body -->
    <tbody data-bind="template: {name:'topicTemplate', foreach: topics}"></tbody>
</table>
<button data-bind="click: addTopic">Add another topic</button>

<script type="text/x-jquery-tmpl" id="topicTemplate">
    <tr>
        <td><input data-bind="value: title"/></td>
        <td><input size="100" data-bind="value: description"/></td>
		<td><hidden data-bind="value: key"/></td>
        <td><a href="#" data-bind="click: remove">Remove</a></td>
    </tr>
</script>

<button data-bind="click: save">Save</button>

<textarea name="tasks" data-bind="value: ko.toJSON({title: viewModel.title, short_title: viewModel.short_title, topics: viewModel.topics})"></textarea>
<!-- VIEW MODEL -->
<script type="text/javascript">
// Class to represent a row in the topics grid
var topic = function(key, title, description) {
	this.key = ko.observable(key);
    this.title = ko.observable(title);
    this.description = ko.observable(description);
    
    this.remove = function() {viewModel.topics.remove(this) }
}

// Overall viewmodel for this screen, along with initial state
var viewModel = {
	title: ko.observable("{{talk.title}}"),
	short_title: ko.observable("{{talk.short_title}}"),
	description: ko.observable("{{talk.description}}"),
	icon_url: ko.observable("{{talk.icon_url}}"),
	topics: ko.observableArray([
	{% for topic in topics %}
		new topic("{{topic.key}}", "{{topic.title}}", "{{topic.description}}"), 
    {% endfor %}
    ]),
	category1: ko.observable("{{talk.category1}}"),
	category2: ko.observable("{{talk.category2}}"),
	category3: ko.observable("{{talk.category3}}"),
    
    addTopic: function() {
        this.topics.push(new topic("no-key", "Title", "desc"));
    },
	
	save: function() {
		alert("saving...");
		talk_data_string = ko.toJSON({title: this.title, short_title: this.short_title, 
									  description: this.description,
									  icon_url: this.icon_url,
									  category1: this.category1, 
									  category2: this.category2,
									  category3: this.category3,
									  topics: this.topics});
		alert(talk_data_string);
		$.post("/admin/talk/edit/{{talk.short_title}}", {talk_data:talk_data_string},
			function(data) {
				if (data.error) {
					alert("Error saving: " + data.error);
				} else if (data.success) {
					alert("Changes saved");
				}
				//alert("Server says: " + data);
			}, "json"	
		);
		//alert("data sent");
    }
};



ko.applyBindings(viewModel);
</script>

</body>
</html>